<template>
  <div ref="chartRef" :style="{ width, height }" style="font-size: 12px !important;"></div>
</template>
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: '100%'
  },
  height: {
    type: String as PropType<string>,
    default: '300px'
  },
  name: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '环形图'
  },
  data: {
    type: Array,
    default() {
      // const action = [
      //   { value: 1048, name: '查看职位' },
      //   { value: 735, name: '查看公司' },
      //   { value: 580, name: '点击分享' },
      //   { value: 484, name: '点击投递' }
      // ];

      return [];
    }
  }
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
  () => props.loading,
  () => {
    if (props.loading) {
      return;
    }

    if (props.data == undefined || props.data == 'undefined') {
      return;
    }

    setOptions({
      title: {
        text: props.title,
        top: '15px',
        left: '18px'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{d}%\n{b}'
      },
      legend: {
        orient: 'vertical',
        left: '80%',
        padding: [20, 1, 0, 30],
        selectedMode: true,
        icon: 'circle'
      },
      series: [
        {
          name: props.name,
          type: 'pie',
          radius: ['40%', '60%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            formatter: '{d}%'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '12',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            normal: {
              show: true,
              legend: 8,
              legend2: 15,
              linestyle: {
                color: '#2979FF'
              }
            }
          },
          data: props.data,
          animationType: 'scale',
          animationEasing: 'exponentialInOut',
          animationDelay: function() {
            return Math.random() * 100;
          }
        }
      ]
    });
  },
  { immediate: true }
);
</script>
